cucDefine(['common'], function(common){
    let {loadScript, loadStyle, commonInit, commonVar} = common;

    const NOCHANGELANG = 0;
    const CHANGELANG = 1;
    const NOSETTING = 0;
    const SETTING = 1;
    let langs = ["C++(clang++11)","C(clang11)","javascript(V8 6.0.0)","python3(3.9)"];
    let langsOp = ["c_cpp","c_cpp","javascript","python"];
    let state;
    let setState;

    class ACE extends HTMLElement {
        constructor() {
            super();
            commonInit(this);
            // let shadow = this.attachShadow({mode: 'open'});
            this.addToolBox();
            let div = document.createElement("div");
            this.className = "jh-ace";
            div.id = "ide";
            loadStyle(this, commonVar.rootPath + "/assets/component/aceide/ace.css");
            // loadScript(shadow, "./js/ace/build/src/ace.js");
            this.appendChild(div);
            this.addSubmit();
            loadScript(this, commonVar.rootPath + "/assets/component/aceide/build/initAce.js");
        }
        addToolBox() {
            let toolbox = document.createElement("div");
            toolbox.className = "jh-ace-tool";

            this.langDom = document.createElement("div");
            this.langDom.className = "btn";
            this.langDom.onselectstart = ()=>{return false;};
            this.langDomP = document.createElement("p");
            this.langDom.appendChild(this.langDomP);
            this.state = NOCHANGELANG;
            this.langDom.onclick = ()=>{
                this.state = !this.state;
            }
            let langListDom = document.createElement("div");
            langListDom.className = "lang-list";
            let lldol = document.createElement("ol");
            lldol.className = "langOl";
            for(let i=0; i<langs.length; i++){
                let lldli = document.createElement("li");
                lldli.innerHTML = langs[i];
                lldli.onclick = (e)=>{
                    this.changeLang(this.editor,langs.indexOf(e.target.innerText));
                }
                lldol.appendChild(lldli);
            }
            langListDom.appendChild(lldol);
            Object.defineProperty(this, "state", {
                set(value){
                    if(value == CHANGELANG){
                        this.langDom.appendChild(langListDom);
                    } else {
                        this.langDom.removeChild(langListDom);
                    }
                    state = value;
                },
                get(){
                    return state;
                }
            })
            toolbox.appendChild(this.langDom);

            let text = document.createElement('div');
            text.innerHTML = `<i class="fa fa-spinner" aria-hidden="true"></i>&nbsp;This mode is developing... ...`;
            text.className = "warning";
            toolbox.appendChild(text);

            this.setState = NOSETTING;
            this.themeDom = document.createElement("div");
            this.themeDom.className = "btn btn2";
            this.themeDom.onselectstart = ()=>{return false;};
            this.themeDomP = document.createElement("i");
            this.themeDomP.innerHTML = `<i class="fa fa-cog" aria-hidden="true"></i>`;
            this.themeDom.appendChild(this.themeDomP);
            this.themeDom.onclick = ()=>{};
            this.themeDom.onclick = (e)=>{
                let ans = 0;
                document.getElementsByName("theme").forEach((item)=>{
                    if(e.target == item){
                        ans = e.target.value;
                    }
                });
                console.log(ans);
                if(ans == '0' && ans == '1'){

                } else {
                    this.setState = !this.setState;
                }
            }
            let settingDom = document.createElement('div');
            settingDom.innerHTML = `<div style="width: 200px;position: absolute;z-index: 9;background-color: rgb(47, 49, 51);right: 0;">
                <div style="font-size: 13px;color: rgb(179, 107, 107);cursor: no-drop;"><i class="fa fa-spinner" aria-hidden="true"></i>&nbsp;Waiting for development... ...</div>
                <div class="span6" style="margin-left: 0; padding-left: 15px;text-align: justify;">
                    <h6>主题</h6>
                    <label><input name="theme" type="radio" value="0" style="margin-top: 0;" checked="" disabled>&nbsp;Black</label>
                    <label><input name="theme" type="radio" value="1" style="margin-top: 0;" disabled>&nbsp;White</label>
                </div>
                <div class="span6" style="padding-left: 15px;text-align: justify;">
                    <h6>字体</h6>
                    <label><input name="font" type="radio" value="2" style="margin-top: 0;" checked="" disabled>&nbsp;Smaller</label>
                    <label><input name="font" type="radio" value="3" style="margin-top: 0;" disabled>&nbsp;Bigger</label>
                </div>
            </div>`;
            Object.defineProperty(this, "setState", {
                set(value){
                    if(value == SETTING){
                        this.themeDom.appendChild(settingDom);
                    } else {
                        this.themeDom.removeChild(settingDom);
                    }
                    setState = value;
                },
                get(){
                    return setState;
                }
            })
            toolbox.appendChild(this.themeDom);

            this.appendChild(toolbox);
        }
        addSubmit(){
            let submit = document.createElement("div");
            submit.className = "jh-ace-sub";
            let sub = document.createElement("div");
            sub.className = "btn";
            sub.innerHTML = "<i class='fa fa-floppy-o' aria-hidden='true'></i>&nbsp;&nbsp;&nbsp;保存并提交";
            submit.append(sub);
            this.append(submit);
        }
        initLang(editor, lang) {
            this.editor = editor;
            this.changeLang(editor, lang);
        }
        changeLang(editor, lang){
            editor.getSession().setMode("ace/mode/"+langsOp[lang]);
            this.langDomP.innerText = langs[lang];
        }
    }
    return ACE;
});